<template>
  <div>
    <el-upload
      ref="upload"
      :limit="1"
      :on-exceed="uploadExceed"
      :on-remove="handleRemove"
      :before-remove="beforeRemove"
      :on-change="uploadChange"
      :before-upload="beforeUpload"
      :on-success="uploadSuccess"
      :show-file-list="true"
      :action="actionURL"
      :file-list="fileList"
      :on-progress="upLoadProgress"
      accept=".jasper"
      class="upload-demo">
      <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
      <div slot="tip" class="el-upload__tip">只能上传jasper文件</div>
    </el-upload>
  </div>
</template>

<script>
// import { templateUpload } from '../../api/template-management'
export default {
  name: '',
  components: {

  },
  mixins: [

  ],
  props: {
    dataObj: {
      type: Object,
      default: function() {
        return {}
      }
    }
  },
  data() {
    return {
      actionURL: `${process.env.BASE_API}/report-server/reportTemplateController/upload.action`,
      // actionURL: `http://172.16.41.111:8080/report-server/reportTemplateController/upload.action`,

      // uploadData: {},
      fileResList: [],
      fileList: []
    }
  },
  computed: {

  },
  watch: {
    dataObj: {
      handler(newdata, olddata) {
        this.fileList.push({ jasperName: this.dataObj.jasperName })
        this.fileList.forEach(element => {
          element.name = element.jasperName
        })
      },
      deep: true
    }
  },
  created() {
    console.log(this.actionURL, 'this.actionURL')
    // this.uploadData = this.dataObj.uploadData
    if (this.dataObj.jasperName) {
      this.fileList.push({ jasperName: this.dataObj.jasperName })
      this.fileList.forEach(element => {
        element.name = element.jasperName
      })
    }
  },
  mounted() {

  },
  methods: {
    // 上传成功
    uploadSuccess(response, file, fileList) {
      console.log(response, 'response')
      if (response.code === 0) {
        // 上传成功后传参数到父组件中
        this.$emit('getData', response.data)
        this.fileResList.push(response.data)
        this.fileList.push({ name: response.data })
        this.$message({
          type: 'success',
          dangerouslyUseHTMLString: true,
          message: `<strong>操作成功</strong><p>${response.message}</p>`,
          duration: 3000
        })
      } else {
        this.$alert(`<div class="myalert-header">操作失败</div>
          <div class="myalert-content">${response.message}</div>`, {
          dangerouslyUseHTMLString: true, confirmButtonText: '确定',
          type: 'error'
        })
        this.$refs.upload.uploadFiles.map((item, index) => {
          if (item.uid === file.uid) {
            this.$refs.upload.uploadFiles.splice(index, 1)
          }
        })
      }
    },
    upLoadProgress(event, res, fileList) {
      console.log(event, res, fileList)
    },
    // 上传之前
    beforeUpload(file) {
      let fileSize = file.size
      if (fileSize > 2097152) {
        this.$alert(`<div class="myalert-header">操作失败</div>
          <div class="myalert-content">文件大小不能超过2M</div>`, {
          dangerouslyUseHTMLString: true, confirmButtonText: '确定',
          type: 'error'
        })
        return false
      }
      let type = file.name.split('.')
      let fileType = type[type.length - 1]
      let reg = /jasper/ig
      if (!reg.test(fileType)) {
        this.$alert(`<div class="myalert-header">操作失败</div>
          <div class="myalert-content">文件类型错误，允许上传文件类型：jasper</div>`, {
          dangerouslyUseHTMLString: true, confirmButtonText: '确定',
          type: 'error'
        })
        return false
      }
    },
    handleRemove(file, fileList) {
      console.log(file, fileList)
      this.$emit('getData', '')
      this.fileList = []
      if (file && file.status === 'success') {
        // let params
        // if (this.dataObj.fileList.length > 0) {
        //   params = { fileId: file.fileId, serviceName: 'fileDealService' }
        // } else {
        //   params = { fileId: file.response.data.fileId, serviceName: 'fileDealService' }
        // }
        // commonApicommonApi.del(params).then(res => {
        //   if (res.data.code === 0) {
        //     this.$message({
        //       type: 'success',
        //       dangerouslyUseHTMLString: true,
        //       message: `<strong>操作成功</strong><p>${res.data.message}</p>`,
        //       duration: 3000
        //     })
        //   } else {
        //     this.$alert(`<div class="myalert-header">操作失败</div>
        //       <div class="myalert-content">${res.data.message}</div>`, {
        //       dangerouslyUseHTMLString: true, confirmButtonText: '确定',
        //       type: 'error'
        //     })
        //   }
        // })
      }
    },
    uploadChange(file) {
    },
    beforeRemove(file, fileList) {
      if (file && file.status === 'success') {
        return this.$confirm(`<div class="myalert-header">操作提醒</div><div class="myalert-content">确定移除 ${file.name}？</div>`, {
          confirmButtonText: '确定',
          dangerouslyUseHTMLString: true,
          cancelButtonText: '取消',
          type: 'warning'
        })
      }
    },
    uploadExceed() {
      this.$alert(`<div class="myalert-header">操作失败</div>
        <div class="myalert-content">只能上传一个文件,请删除后再上传</div>`, {
        dangerouslyUseHTMLString: true, confirmButtonText: '确定',
        type: 'error'
      })
    },
    // 清空
    clearFiles() {
      this.$refs.upload.clearFiles()
    }
  }
}
</script>

<style scoped lang="scss">

</style>
